<template>
	<view>
		<view class="banner" style="padding: 20rpx;">
			<u-swiper keyName="image" :list="list1" circular :autoplay="true" indicator indicatorMode="dot"></u-swiper>
		</view>
		<u-sticky>
			<view class="tabler_top" :style="{'width':tablerTopWidth+'rpx'}">
				<u-tabs lineColor="rgb(126,94,63)" :list="list1" keyName='name' lineWidth='70rpx'
					itemStyle="width: 18%;height:60rpx;"></u-tabs>
				<u-divider style="margin-top: -0rpx;padding: 0 45rpx;" lineColor="rgb(126,94,63)"></u-divider>
			</view>
		</u-sticky>
		<view style="padding: 0 45rpx;">
			<u-notice-bar :text="text1" mode="link" icon=""></u-notice-bar>
		</view>

		<view class="u-page">
			<u-list @scrolltolower="scrolltolower" style="height: 400rpx;">
				<u-list-item>
					<u-cell class="cell_text_css" v-for="(item, index) in list2" :key="index">
						<view slot="title" class="u-slot-title">
							<text class="u-cell-text">{{item.name}}</text>
						</view>
					</u-cell>
				</u-list-item>
			</u-list>
		</view>

		<view class="bottom_image">
			<image :src="randomItem.image" mode=""></image>
		</view>
	</view>
</template>

<script>
	import {
		dalImg
	} from "../../utils/tools"
	import {
		GetArticlesListAPI,
		GetArticlesCategoriesListAPI
	} from "../../services/api.js"
	export default {
		data() {
			return {
				list1: [],
				list2: [],
				list3: [],
				randomItem: {},
				tablerTopWidth: 700,
				text1: "[OL][活动] 5.10-5.16 神箭秘宝卫兹返场 嚣焰滔天*梁兴限时上新"
			}
		},
		methods: {
			getArticlesList() {
				GetArticlesListAPI(5).then(res => {
					console.log("所有信息", res);
					this.list2 = res.data.list.map(item => {
						return {
							...item,
							image: dalImg(item.image)
						}
					})

				})
				GetArticlesListAPI(20, 1, "活动").then(res => {

					this.list3 = res.data.list.map(item => {
						return {
							image: dalImg(item.image)
						}
					})
					console.log(this.list3);
					this.randomItem = this.list3[Math.floor(Math.random() * this.list3.length)];
				})
			},
			getArticlesCategoriesList() {
				GetArticlesCategoriesListAPI().then(res => {
					console.log("分类信息", res);
					this.list1 = (res.data.map(item => {
						return {
							...item,
							image: dalImg(item.image)
						}
					})).reverse()
				})

			},
			scrolltolower() {},
			onPageScroll: function(e) { //nvue暂不支持滚动监听，可用bindingx代替
				if (e.scrollTop >= 150) {
					this.tablerTopWidth = 750
				} else this.tablerTopWidth = 700
			},


		},

		onLoad() {
			this.getArticlesCategoriesList()
		},
		onShow() {
			this.getArticlesList()

		},

	}
</script>

<style>
	.bottom_image {
		width: 630rpx;
		margin: 0 auto;

		image {
			height: 250rpx;

		}
	}

	.tabler_top {
		background-image: url("../../static/bottom.jpg");
		background-size: 100% 100%;

		margin: 0 auto;
	}

	.cell_text_css {
		width: 630rpx;
		margin: 0 auto;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;

	}

	.u-cell-text {
		margin-left: -34rpx;
		font-size: 26rpx;
	}
</style>